<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <meta charset="UTF-8">
    <title>会员注册-${site.title}</title>
    <meta name="keywords" content="${site.keywords},会员注册,注册入口">
    <meta name="description" content="${site.description}，注册入口">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="${site.favicon}" />
    <link href="/static/website/default/plugins/bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="/static/website/default/plugins/Font-Awesome-3.2.1/css/font-awesome.css" rel="stylesheet">
    <link href="/static/website/default/assets/css/main.css" rel="stylesheet">
    <link href="/static/website/default/assets/css/style.css" rel="stylesheet">
    <link href="/static/website/default/assets/css/footer.css" rel="stylesheet">
</head>
<body>
<#include "/website/default/common/header.html" />
<section class="main">
    <div id="container" class="container">
        <div class="thumbnail">
            <div class="caption">
                <div class='row'>
                    <div class="col-md-8 hidden-xs">
                        <div class="carousel slide" id="exampleCarouselCaptions" data-ride="carousel">
                            <ol class="carousel-indicators">
                                <@cms_ad_list adCategoryId=1186>
                                    <#if cmsAdList?? && cmsAdList?size gt 0>
                                        <#list cmsAdList as cmsAd>
                                            <#if cmsAd_index==0>
                                                <li class="active" data-slide-to="${cmsAd_index}" data-target="#exampleCarouselCaptions"></li>
                                            </#if>
                                            <#if cmsAd_index!=0>
                                                <li class="" data-slide-to="${cmsAd_index}" data-target="#exampleCarouselCaptions"></li>
                                            </#if>
                                        </#list>
                                    </#if>
                                </@cms_ad_list>
                            </ol>
                            <div class="carousel-inner" role="listbox">
                                <@cms_ad_list adCategoryId=1186>
                                    <#if cmsAdList?? && cmsAdList?size gt 0>
                                        <#list cmsAdList as cmsAd>
                                            <#if cmsAd_index==0>
                                                <div class="item active">
                                            </#if>
                                            <#if cmsAd_index!=0>
                                                <div class="item">
                                            </#if>
                                                    ${cmsAd.content}
                                                    <div class="carousel-caption">
                                                        <h3>${cmsAd.name}</h3>
                                                        <p>${cmsAd.description}</p>
                                                    </div>
                                                </div>
                                        </#list>
                                    </#if>
                                </@cms_ad_list>
                            </div>
                            <a class="left carousel-control" href="#exampleCarouselCaptions" role="button" data-slide="prev">
                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                <span class="sr-only">上一个</span></a>
                            <a class="right carousel-control" href="#exampleCarouselCaptions" role="button" data-slide="next">
                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                <span class="sr-only">下一个</span></a>
                        </div>
                    </div>
                    <div class="col-md-4">
                        <form action="/register" class="register-form" id="register-from" onsubmit="return false;" style="padding:0 20px;" >
                            <h2 class="form-register-heading text-center">欢迎注册</h2>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon input-icon"><i class="glyphicon glyphicon-user"></i></span>
                                    <input name="username" id="username" type="text" class="form-control" placeholder="请输入用户名">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon input-icon"><i class="glyphicon glyphicon-lock"> </i></span>
                                    <input name="password" id="password" type="password" class="form-control"  placeholder="请输入密码">
                                    <span class="input-group-addon input-icon"><i class="glyphicon glyphicon-eye-close"></i></span>
                                </div>
                            </div>
                            <div class="form-group required" aria-required="true">
                                <div class="input-group required" aria-required="true">
                                        <span class="input-group-addon input-icon">
                                            <i class="glyphicon glyphicon-send"></i>
                                        </span>
                                    <input name="email" type="email" class="form-control" placeholder="电子邮箱" >
                                </div>
                            </div>
                            <div class="form-group register-captcha">
                                <div class="input-group required" aria-required="true">
                                    <span class="input-group-addon input-icon"><i class="glyphicon glyphicon-th-large"></i></span>
                                    <input id="captcha" name="captcha" type="text" class="form-control input-captcha" maxlength="4" placeholder="验证码" />
                                    <span class="input-group-addon captcha no-padding" style="width: 81px;height: 34px;padding: 0;">
                                            <img class="captcha" src="/captcha" alt="captcha">
                                        </span>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="input-group required checkbox" aria-required="true">
                                    <label>
                                        <input type="checkbox" name="agree" checked="" />
                                        我接受
                                        <a href="/agreement.html" class="btn-link" target="_blank">《用户协议》</a>及
                                        <a href="/privacy_statement.html" class="btn-link"  target="_blank">《隐私保护声明》</a>
                                    </label>
                                </div>
                            </div>
                            <div class="error-message text-center" >
                                <span class="error-icon"></span>
                                <span id="error-msg" class="error-msg text-danger" ></span>
                            </div>
                            <div class="form-group">
                                <div class="text-center">
                                    <button type="submit" class="btn btn-block btn-primary">注	册</button>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="text-right">
                                    <a href="/login.html" class="btn-link go-to-login">已有账号？</a>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<#include "/website/default/common/footer.html" />


<#include "/website/default/common/mobile-bottom.html" />

<#include "/website/default/common/bottom.html" />

<script src="/static/website/default/plugins/jquery/validate/jquery.validate.js"></script>
<script src="/static/website/default/plugins/jquery/validate/jquery.validate.methods.js"></script>
<script type="text/javascript">
    function ajaxSubmit(form) {

        var $form = $(form);

        if ($form.length === 1 && $form.validate()) {
            $.post(form.action, $form.serialize(),
                function(result) {
                    if (result.status === 200) {

                        location.replace(result.data);
                    } else {
                        $form.find(".error-msg").html(result.message);
                        $form.find(".error-msg").show();
                    }
                }, 'json');
        }
    }

    $(function() {
        var $registerForm = $(".register-form");
        $registerForm.validate({
            rules: {
                captcha: {
                    required: true,
                    remote: {
                        url: "/captcha/check",     //后台处理程序
                        type: "post"
                    }
                },
                username: {
                    required: true,
                    pattern: /^[a-zA-Z0-9]{5,12}$/
                },
                password: {
                    required: true,
                },
                email:{
                    required: true,
                    pattern: /^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/
                }
            },
            messages: {
                captcha:{
                    required:"验证码不能为空！",
                    remote:"验证码错误！"
                },
                username: {
                    required: "登录名不能为空！",
                    pattern:"登录名格式错误！"
                },
                password: {
                    required: "密码不能为空！"
                },
                email:{
                    required: "邮箱不能为空！",
                    pattern: "邮箱格式错误！"
                }
            },
            submitHandler:ajaxSubmit,
            errorLabelContainer:".error-msg",
            wrapper:"li",
            showErrors:function(errorMap,errorList) {
                if(errorList.length>0){
                    $registerForm.find(".error-msg").html(errorList[0].message);
                }else{
                    $registerForm.find(".error-msg").html("");
                }
            },
            onkeyup: false
        });

    });
</script>
</body>
</html>